<template>
  <!-- 工单分配情况 -->
  <div class="count-request-box" v-loading="loading">
    <div style="padding: 10px">
      <el-date-picker
        v-model="dateArr"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
    </div>
    <div id="chart-ServicesOrgNameCountBox" class="chart-box"></div>
  </div>
</template>

<script setup lang="ts" name="ServicesOrgNameCountBox">
import { ref, watch, onMounted } from "vue";
import { findServicesOrgNameCount } from "@/api/modules/index";
import { useRouter } from "vue-router";
import * as echarts from "echarts";

const router = useRouter();

const dateArr = ref<any>([]);
const list = ref<any[]>([]);
const loading = ref(false);

let chartDom;
let myChart;
let option;

const getData = () => {
  loading.value = true;
  setTimeout(() => {
    findServicesOrgNameCount({
      start: dateArr.value[0] + " 00:00:00",
      over: dateArr.value[1] + " 23:59:59"
    })
      .then((res: any) => {
        loading.value = false;
        list.value = res;

        let names = ref<any[]>([]);
        let resolved_arr = ref<number[]>([]);
        let unresolved_arr = ref<number[]>([]);
        res.forEach((item: any) => {
          names.value.push(item.name);
          let resolved_num = 0;
          let unresolved_num = 0;
          item.requetDto.forEach(vo => {
            if (vo.statusNam == "处理完成" || vo.statusName == "请求关闭") {
              resolved_num++;
            } else {
              unresolved_num++;
            }
          });
          resolved_arr.value.push(resolved_num);
          unresolved_arr.value.push(unresolved_num);
        });
        chartDom = document.getElementById("chart-ServicesOrgNameCountBox");
        myChart = echarts.init(chartDom);
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {},
          grid: {
            left: "15",
            right: "15",
            bottom: "15",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: names.value
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          color: ["#339966", "#FFCC00"],
          series: [
            {
              name: "已解决工单",
              type: "bar",
              stack: "Ad",
              emphasis: {
                focus: "series"
              },
              data: resolved_arr.value,
              barWidth: "50%",
              // barMinWidth: '20px',
              barMaxWidth: "40px"
            },
            {
              name: "未解决工单",
              type: "bar",
              stack: "Ad",
              emphasis: {
                focus: "series"
              },
              data: unresolved_arr.value,
              barWidth: "50%",
              // barMinWidth: '20px',
              barMaxWidth: "40px"
            }
          ]
        };
        myChart.setOption(option);
      })
      .catch(() => {
        list.value = [];
        loading.value = false;
      });
  }, Math.random() * 500);
};

watch(
  () => dateArr.value,
  val => {
    getData();
  }
);

onMounted(() => {
  let myDate = new Date();
  let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let month_text = "";
  month_text = month > 9 ? "" + month : "0" + month;
  let day = myDate.getDate(); //获取当前日(1-31)
  let day_text = "";
  day_text = day > 9 ? "" + day : "0" + day;
  dateArr.value = [year + "-01-01", [year, month_text, day_text].join("-")];
});
</script>

<style scoped lang="scss">
.chart-box {
  height: 360px;
}
</style>
